<style>
.validation-advice {
	color: red;
	padding: 10px 0px;
}
input {
	margin: 5px 0px;
}
dt {
	border-bottom: bold;
	padding-top: 10px;
}
</style>

<p>If you enter invalid options in the inputs below you should see errors.</p>


<form id="foo" >
<dl>
	<dt>If you uncheck this checkbox, form validator will not enforce the next input.</dt>
	<dd><input type="checkbox" class="validate-enforce-oncheck toEnforce:['a','b','c']"/><br/>
		these inputs will be required if the checkbox above is checked:
		<input id="a" class="required"/>
		<input id="b" class="required"/>
		<input id="c" class="required"/>

		</dd>
	<dt>If you uncheck this checkbox, form validator will not enforce the next input.</dt>
	<dd><input name="a" type="checkbox" checked="true" class="validate-toggle-oncheck toToggle:['nospaces']"></dd>
	<dt>This input cannot have spaces.</dt>
	<dd><input name="b" class="validate-nospace" id="nospaces"/></dd>
	<dt>One item in this group must be selected (on submit).</dt>
	<dd id="rads">
		<input type="checkbox" name="rads" value="1"/>
		<input type="checkbox" name="rads" value="2"/>
		<input type="checkbox" name="rads" value="3" class="validate-reqchk-bynode" validatorProps="{nodeId:'rads'}"/>
	</dd>
	<dt>One item in this group must also be selected (on submit).</dt>
	<dd>
		<input type="checkbox" name="rads2" value="1"/>
		<input type="checkbox" name="rads2" value="2"/>
		<input type="checkbox" name="rads2" value="3" class="validate-reqchk-byname"/>
	</dd>
	<dt>This checkbox must be checked.</dt>
	<dd><input type="checkbox" class="validate-required-check"/></dd>
	<dt>The date/time in the second input must be after the first.</dt>
	<dd>
		<input type="input" id="before1"/>
		<input type="input" id="after1" class="validate-after-date" validatorProps="{afterElement: 'before1'}"/>
	</dd>
	<dt>The date/time in the second input must be after the first.</dt>
	<dd>
		<input type="input" id="before2" class="validate-before-date" validatorProps="{beforeElement: 'after2'}"/>
		<input type="input" id="after2"/>
	</dd>
	<dt>The fist input must be before the current date; the second must be after.</dt>
	<dd>
		<input type="input" id="before3" class="validate-before-date"/>
		<input type="input" id="after3" class="validate-after-date"/>
	</dd>
	<dt>The first item in the select list should be invalid.</dt>
	<dd>
		<select class="validate-custom-required" validatorProps="{emptyValue: 'null'}">
			<option value="null">this should be invalid</option>
			<option value="">this should not be</option>
		</select>
	</dd>
	<dt>The dates you enter here must be in the same month.</dt>
	<dd>
		<input type="text" id="sameMo"/>
		<input type="text" class="validate-same-month" validatorProps="{sameMonthAs: 'sameMo'}"/>
	</dd>
</dl>
<input type="submit">
</form>

<script src="/depender/build?require=More/Form.Validator.Inline,More/Form.Validator.Extras,More/Fx.Reveal,More/Fx.Scroll"></script>

<script type="text/javascript">
	new Form.Validator.Inline('foo', {
		serial: false,
		onFormValidate: function(passed, form, event){
			event.stop();
			if (passed) alert('form validated');
			else alert('form did NOT validate');
		}
	});
</script>

